<template>
	<view class="info-page" >
		<view class="info-text">
			<van-image width="100%" height="340" :src="info.image" />
			<view>
				<p class="info-price">￥<span>{{info.price}}</span></p>
				<p class="info-name">{{info.name }}</p>
			</view>

		</view>
		<!-- 功效，厂家，规格 -->
		<view class="info-content">
			<p class="content">
				<span class="one">功效</span>
				<span class="two">{{info.effect}}</span>
				<image src="../../static/更多.png"
				style="width: 50rpx;height: 50rpx;position: absolute;right:20px;"
				is-link @click="ok = true"></image>
				</p>
			<p class="content">
				<span class="one">厂家</span>
				<span class="two">{{supplier}}</span></p>
			<p class="content">
				<span class="one">规格</span>
				<span class="two">{{info.stipulate}}</span></p>
			<view class="info-icon">
				<view class="icon">
					<van-icon name="passed"  color="#FF0000"/>
					<span>正品保障</span>
				</view>
				<view class="icon">
					<van-icon name="passed"  color="#FF0000"/>
					<span>药监资格</span>
				</view>
			</view>
		</view>

		<!-- 商品导航栏 -->
		<van-action-bar>
			<van-action-bar-icon icon="shop-o" text="首页" color="#ee0a24" to="/"/>
			<van-action-bar-icon icon="cart-o" text="购物车" @click="gocart"/>
			<van-action-bar-icon icon="star-o" text="收藏"  @click="gocollect"/>
			<van-action-bar-button type="warning" text="加入购物车"  
			is-link @click="show = true"/>
			<van-action-bar-button type="danger" text="立即购买" is-link @click="show2 = true"/>
		</van-action-bar>
		<!-- 加入购物车弹出层 -->
		<view class="up-content">
			<van-popup
			  v-model:show="show2"
			   round
			  position="bottom"
			  :style="{ height: '50%' }"
			>
			<view class="up">
				<view class="pic">
					<image :src="info.image" mode=""></image>
					<view >
						<p class="pic-name">{{info.name}}</p>
						<p  class="pic-price">￥<span>{{info.price}}</span></p>
					</view>
				</view>
				<!-- 规格 -->
				<view class="text">
					<p>规格</p>
					<van-button plain hairline round size="small" 
					type="warning" 
					style="background-color: #FFF5F5; width: 160rpx;">
					{{info.stipulate}}</van-button>
				</view>
				<!-- 数量 -->
				<view class="num">
					<span>数量</span>
					<van-stepper v-model="value" theme="round" 
					button-size="22" disable-input @change="changenum"/>
				</view>
				<van-button round type="danger" size="large" 
				style="margin-top: 50rpx;" @click="addcheckout" >立即购买</van-button>
			</view>
			</van-popup>
		</view>
		<!-- 立即购物 -->
		<!-- 加入购物车弹出层 -->
		<view class="up-content">
			<van-popup
			  v-model:show="show"
			   round
			  position="bottom"
			  :style="{ height: '50%' }"
			>
			<view class="up">
				<view class="pic">
					<image :src="info.image" mode=""></image>
					<view >
						<p class="pic-name">{{info.name}}</p>
						<p  class="pic-price">￥<span>{{info.price}}</span></p>
					</view>
				</view>
				<!-- 规格 -->
				<view class="text">
					<p>规格</p>
					<van-button plain hairline round size="small" 
					type="warning" 
					style="background-color: #FFF5F5; width: 160rpx;">
					{{info.stipulate}}</van-button>
				</view>
				<!-- 数量 -->
				<view class="num">
					<span>数量</span>
					<van-stepper v-model="value" theme="round" 
					button-size="22" disable-input @change="changenum"/>
				</view>
				<van-button round type="danger" size="large" 
				style="margin-top: 50rpx;" @click="addcart" >加入购物车</van-button>
			</view>
			</van-popup>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';
import {useStore} from 'vuex'
import {onLoad,onShow} from '@dcloudio/uni-app';
import api from '../../lib/request.js'
const value = ref(1);

const show = ref(false);
const show2 = ref(false);
const store =useStore()
const ok = ref(false);
let info = ref({})
let gid = ref('')
let id = ref(store.state.uid)

let good = ref('')
let supplier = ref('')
let list = ref([])
//前往立即购物
function addcheckout(){
	show2.value = false
	Object.assign(info.value,{count:value.value,supplier:supplier.value})
	list.value.push(info.value)
	store.commit('update_good',list.value)
	store.commit('update_price',list.value[0].price)
	uni.navigateTo({
		url:'/pages/checkout/checkout',
	})
}


//点击收藏加入收藏
function gocollect(){
	uni.showToast({
		title: "已收藏"
	})
	// 接口收藏
}


// 前往购物车
function gocart(){
	uni.reLaunch({
		url:'/pages/cart/cart'
	})
}
// 初始化
onLoad(({id})=>{
	gid.value = id
	api.get(`/medicine/findById/${id}`).then(res=>{
			info.value = res.data	
	})
	api.get('/medicine/findAllMore').then(res=>{
		let all = res.data
		let a = all.filter(item=>{
			if(item.name==info.value.name){
				return item.supplierName
			}
		})
		supplier.value = a[0].supplierName
	})
})


// 加入购物车
function addcart(){
	console.log(info.value);
	api.post('/shopping/addShopping',{
		id:info.value.id,
		medicineName:info.value.name,
		image:info.value.image,
		price:info.value.price,
		stipulate:info.value.stipulate,
		supplierName:supplier.value,
		effect:info.value.effect,
		userId:id.value,
		count:value.value}).then(res=>{
			show.value = false
			if(res.code){
				uni.showToast({
					title: "已加入购物车"
				})
			}
	})
}





</script>

<style>
	.info-page {
		height: calc(100vh - 94px);
		background-color: rgb(245, 245, 245)
	}

	.info-text>view {
		width: 100%;
		/* height: 50rpx; */
		/* border: 1px solid;	 */
		padding: 20rpx 30rpx;
		background-color: #fff;
	}

	.info-price {
		color: red;

	}

	.info-price span {
		font-size: 40rpx;
		font-weight: bolder;
	}

	.info-name {
		font-size: 40rpx;
		font-weight: bolder;
		margin-top: 10rpx;
	}

	/* 厂家 */
	.info-content {
		width: 100%;
		height: 250rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: #fff;
		font-size: 30rpx;
	}
	.info-content>content>image{
		width: 300rpx;
	}
	.content {
		margin-bottom: 10rpx;
		border-bottom: 0.5px solid #eee;
		padding: 10rpx;
	}

	.content .two {
		margin-left: 40rpx;
	}

	.content .one {
		color: #bababa;
	}
	
	/* icon */
	.info-icon{
		display: flex;
		margin-top: 20rpx;
	}
	.info-icon>.icon:nth-child(1){
		margin-right: 30rpx;
	}
	.van-icon{
		margin-right: 20rpx;
	}
	
	/* 弹出框 */
	.pic{
		display: flex;
		margin: 40rpx;
		align-items: center;
	}
	.pic>image{
		width: 200rpx;
		height: 200rpx;
		padding: 10rpx;
		border: 1px solid #eee;
		border-radius: 10rpx;
		box-shadow: 0 0 10px 2px #eee;
		margin-right: 40rpx;
	}
	.pic .pic-name{
		font-size: 38rpx;
		font-weight: bolder;
	}
	.pic-price{
		color: red;
		margin-top: 20rpx;
	}
	.pic-price>span{
		font-size: 40rpx;
		font-weight: bolder;
		
	}
	
	/* 规格 */
	.text{
		margin-left: 36rpx;
		margin-bottom: 20rpx;
	}
	.text>p{
		font-weight: bolder;
		margin-bottom: 20rpx;
	}
	
	/* 数量 */
	.num{
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
	}
	
	.num>span{
		font-weight: bolder;
	}
</style>